<template>
  <div class="write">
    <h1>发表博客</h1>
    <div class="title">
      <h2>标题:</h2>
      <el-input v-model="blogForm.title"></el-input>
    </div>
    <div class="container">
      <h2>内容:</h2>
      <el-input type="textarea" v-model="blogForm.text"></el-input>
    </div>
    <div class="author">
      <h2>图片</h2>
      <input
        type="file"
        class="file"
        @change="changeImage"
        accept="image/*">
      </input>
    </div>
    <el-button type="success" @click="addBlog">发表</el-button>
  </div>
</template>

<script>

  export default {
    name: "Write",
    data() {
      return {
        blogForm: {
          title: '',
          text: '',
          photo: {}
        },
      }
    },
    methods: {
      addBlog(e) {
        const formData = new FormData()
        formData.append('photo', this.blogForm.photo)
        formData.append('text', this.blogForm.text)
        formData.append('title', this.blogForm.title)
        this.$store.dispatch('addBlog', formData)
          .then(()=>{
            this.$router.push('/blog')
            location.reload()
          })
      },
      changeImage(e) {
        this.blogForm.photo = e.target.files[0]
      }
    }
  }
</script>

<style scoped lang="less">
  .write {
    width: 600px;
    margin: auto;

    div {
      margin-top: 20px;

    }

    h1 {
      font-size: 25px;
      font-weight: bold;
    }

    h2 {
      color: #999999;
      font-size: 18px;
      font-weight: bold;
    }

    .el-button {
      margin-top: 20px;
    }
    .file {
      color: #fff;
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
  }
</style>